<template>
  <div>
    <div>
      <el-badge :value="12" class="item">
        <el-button size="small">评论</el-button>
      </el-badge>
      <el-badge :value="3" class="item">
        <el-button size="small">回复</el-button>
      </el-badge>

      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class="clearfix">
            评论
            <el-badge class="mark" :value="12" />
          </el-dropdown-item>
          <el-dropdown-item class="clearfix">
            回复
            <el-badge class="mark" :value="3" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <hr />
    <div>
      <el-tag type="success" hit>标签</el-tag>
      <span> --- </span>
      <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type" hit>
        {{ tag.name }}
      </el-tag>
      <!-- <span> --- </span>
      <el-tag
        :key="tag"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag }}
      </el-tag> -->
      <span> --- </span>
      <el-switch
        v-model="value2"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
      <el-switch v-model="value6" disabled> </el-switch>
      <el-switch v-model="value7" disabled> </el-switch>
    </div>
    <hr />
    <div class="block">
      <span class="demonstration">默认不区分颜色(全是金色)</span>
      <el-rate v-model="value11"></el-rate>
    </div>
    <div class="block">
      <span class="demonstration">区分颜色(少于三颗就是灰色)</span>
      <el-rate v-model="value22" :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
      </el-rate>
    </div>
    <!-- <div>
      <span class="demonstration">带表情的评分</span>
      <el-rate
        v-model="value4"
        :icon-classes="[
          'icon-rate-face-1',
          'icon-rate-face-2',
          'icon-rate-face-3',
        ]"
        void-icon-class="icon-rate-face-off"
        :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
      >
      </el-rate>
    </div> -->
    <hr />
    <div class="block">
      <span class="demonstration">默认</span>
      <el-date-picker v-model="value10" type="date" placeholder="选择日期">
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">带快捷选项</span>
      <el-date-picker
        v-model="value20"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions1"
      >
      </el-date-picker>
    </div>
    <hr />
    <el-button :plain="true" @click="open2">成功</el-button>
    <el-button :plain="true" @click="open3">警告</el-button>
    <el-button :plain="true" @click="open">消息</el-button>
    <el-button :plain="true" @click="open4">错误</el-button>
    <el-popover ref="popover5" placement="top" width="160" v-model="visible2">
      <p>这是一段内容这是一段内容确定删除吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible2 = false">
          取消
        </el-button>
        <el-button type="primary" size="mini" @click="visible2 = false">
          确定
        </el-button>
      </div>
    </el-popover>
    <el-button v-popover:popover5>删除</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value2: true,
      value6: true,
      value7: false,
      value11: null,
      visible2: false,
      // value4: null,
      tags: [{ name: "标签", type: "success" }],
      // dynamicTags: ['标签'],
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value10: "",
      value20: "",
      visible2: false,
    };
  },
  methods: {
    open() {
      this.$message("这是一条消息提示");
    },
    open2() {
      this.$message({
        message: "恭喜你，这是一条成功消息",
        type: "success",
      });
    },

    open3() {
      this.$message({
        message: "警告哦，这是一条警告消息",
        type: "warning",
      });
    },

    open4() {
      this.$message.error("错了哦，这是一条错误消息");
    },
  },
};
</script>

<style>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
